<template>
  <div class="container">
    <van-nav-bar left-arrow @click-right='saveInfo' @click-left="$router.back()" title="编辑资料" right-text="保存"></van-nav-bar>
    <van-cell-group>
      <van-cell is-link title="头像" @click="showPhoto=true" center>
        <van-image slot="default" width="1.5rem" height="1.5rem" fit="cover" round :src="user.photo" />
      </van-cell>
      <van-cell is-link title="名称" @click="showName=true" :value="user.name" />
      <van-cell is-link title="性别" @click="showGender=true" :value="user.gender===0?'男':'女'" />
      <van-cell is-link title="生日" @click="showBirthday=true" :value="user.birthday" />
    </van-cell-group>
    <!-- 以下是弹窗 -->
    <van-popup v-model="showPhoto" position="bottom">
      <input type="file" @change="previewImg" ref="myfile" style="display:none">
      <van-cell @click='selectImg' value="本地相册选择" is-link />
      <van-cell value="拍照" is-link />
    </van-popup>
    <van-popup v-model="showName" position="bottom">
      <van-field v-model="user.name" required placeholder="请输入用户名" />
    </van-popup>
    <van-popup v-model="showGender" position="bottom">
      <van-cell value="男" @click="changeGender(0)" is-link />
      <van-cell value="女" @click="changeGender(1)" is-link />
    </van-popup>
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker title="选择生日" v-model="nowDate" type="date" :min-date="minDate" @cancel="showBirthday=false" @confirm="confirmDate" />
    </van-popup>
  </div>
</template>
<script>
import { getUserProfile, saveUserPhoto, saveUserInfo } from '@/api/user.js'
import dayjs from 'dayjs'

export default {
  data () {
    return {
      // 弹窗控制
      showPhoto: false,
      showName: false,
      showGender: false,
      showBirthday: false,
      nowDate: new Date(),
      minDate: new Date('1950-01-01'),
      // 默认用户信息
      photo: 'https://img.yzcdn.cn/vant/cat.jpeg',
      user: {
        name: '默认信息',
        gender: 0,
        birthday: '2019-10-10'
      }
    }
  },
  methods: {

    //   编辑用户提交表单
    async saveInfo () {
      try {
        const fd = new FormData()
        fd.append('photo', this.$refs.myfile.files[0])
        // 提交头像
        await saveUserPhoto(fd)
      } catch (error) {
        this.$toast.fail('上传头像失败')
      }
      //   提交用户信息
      try {
        await saveUserInfo({
          name: this.user.name,
          gender: this.user.gender,
          birthday: this.user.birthday
        })
      } catch (error) {
        this.$toast.fail('上传用户信息失败')
      }
    },
    // 头像
    previewImg (e) {
      const img = e.target.files
      if (img.length === 0) {
        return this.$toast.fail('请选择文件')
      }
      //   根据图片文件预览
      const fr = new FileReader()
      // 读取图片文件
      fr.readAsDataURL(img[0])
      fr.onload = () => {
        //   文件加载并转换成地址成功后触发
        // fr.result表示转换文件的数据结果（base64）
        this.user.photo = fr.result
        // 关闭窗口
        this.showPhoto = false
      }
    },
    selectImg () {
      // 触发选择文件的弹窗
      this.$refs.myfile.click()
    },
    // 生日
    confirmDate (date) {
      // 生日格式转换
      this.user.birthday = dayjs(date).format('YYYY-MM-DD')
      //   关闭弹层
      this.showBirthday = false
    },
    // 性别
    changeGender (type) {
      // 将user中性别改为对应性别
      this.user.gender = type
      //   关闭弹窗
      this.showGender = false
    },
    //   获取用户信息
    async getUserProfile () {
      try {
        const ret = await getUserProfile()
        this.user = ret.data
      } catch (error) {
        this.$toast.fail('获取用户信息失败')
      }
    }
  },
  created () {
    this.getUserProfile()
  }
}
</script>
